html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "microsoft yahei";
  overflow: hidden;
}

html {
  font-size: 62.5%;
}

a {
  text-decoration: none;
}

ul {
  margin: 0;
}

li {
  list-style: none;
}

.overhide {
  overflow: hidden;
}

/* 主要通用样式 */
.titlefont {
  font-weight: bold;
  /* font-size: 3.5rem; */
  font-size: 4.2rem;
  -webkit-line-clamp: 2;
  background-image: -webkit-linear-gradient(bottom, #fff, #97f3f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.colorblue1 {
  color: #01f4f6;
}

.colorblue2 {
  color: #458ef2;
}

.coloryellow {
  color: #e0eb0e;
}

/* flex布局 */
.jui-flex {
  display: flex;
}

.jui-flex-row {
  flex-direction: row;
}

.jui-flex-column {
  flex-direction: column;
}

.jui-flex-center {
  justify-content: center;
  align-items: center;
}

.jui-flex-centerx {
  justify-content: center;
}

.jui-flex-centery {
  align-items: center;
}

.jui-flex-wrap {
  flex-wrap: wrap;
}

.jui-flex-item {
  flex: 1;
}

/* 3d容器 */
.frame3d {
  perspective: 1200px;
}

.frame3dchild {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
